﻿/*custom fonts - Bitter, Montserrat*/
@import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter');

/*nav styles*/

.submenu {
    background: white;
    border-top: 6px solid #70c2c2;
    border-top: 6px solid hsl(180, 40%, 60%);
    margin: 0;
    width: 200px;
}

.submenu li {
    list-style-type: none;
    overflow: hidden;
    /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
    position: relative;
}

.submenu li a {
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    /*prevent text selection*/
    -webkit-user-select: none;
    color: #3d8f8f;
    color: hsl(180, 40%, 40%);
    cursor: pointer; /*since the links are dummy without href values*/
    display: block;
    font: normal 14px/28px Montserrat;
    padding: 10px 15px;
    /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
    position: relative;
    text-decoration: none;
    user-select: none;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/

.ink {
    -moz-transform: scale(0);
    -ms-border-radius: 100%;
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    background: #b8e0e0;
    background: hsl(180, 40%, 80%);
    border-radius: 100%;
    display: block;
    position: absolute;
    transform: scale(0);
}

/*animation effect*/

.ink.animate {
    -moz-animation: ripple 0.65s linear;
    -ms-animation: ripple 0.65s linear;
    -o-animation: ripple 0.65s linear;
    -webkit-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}